/**
 * 文章列表页面
 */

import React, { useEffect, useRef, useState } from 'react';
import './style/article.less';
import './phone_style/phone_article.less';
import './phone_style/phone_article_top.less';
import './phone_style/phone_aritcle_bottom.less';
import './style/article_bottom.less';
import './style/article_top.less';
import { useViewport } from '@/provider/viewport_context';
import { HttpStatus } from '@/utils/requests';
import { BlogGetArticleListApi } from '@/service/blog/blog_article_api';
import { BlogArticleItemType } from '@/type/blog/blog_article_type';
import { history } from '@@/core/history';
import { IRouteComponentProps } from 'umi';
import { IPAD_WIDTH } from '@/config/define';
import { LoadingWidget } from '@/widget/loading_wdiget/loading_widget';
import { ArticleDataList } from '@/pages/blog/article/article_data';
import { ErrorWidget404 } from '@/widget/error_widget/404_widget';

// 定义页面需要的数据
interface ArticleStatusType {
  page: number;
  data: Array<BlogArticleItemType>;
  status: HttpStatus;
  morePage?: boolean;
}

/**
 * 根据搜索条件进行跳转
 * @param param
 */
export const pushArticleByParma = (param: any) => {
  history.push({
    pathname: '/blog/article/article_list',
    query: param,
  });
};

/**
 * 跳转到首页
 */
export const pushBlogHome = () => {
  history.push({
    pathname: '/',
  });
};

/**
 * 点击跳转到详情
 * @param id
 */
export const pushArticle = (id: number) => {
  // @ts-ignore
  history.push({
    pathname: '/blog/article/article_content',
    query: {
      id: id,
    },
  });
};

// 文章列表页面
export default (
  props: IRouteComponentProps<any, { category_id: string; tag_id: string }>,
) => {
  const { width } = useViewport();
  const query = props.location?.query;

  // 保存加载更多的信息
  const [articleStatus, setArticleStatus] = useState<ArticleStatusType>({
    page: 1,
    data: [],
    status: HttpStatus.loading,
  });

  // 获取文章列表
  const getArticleList = (pageNum: number) => {
    BlogGetArticleListApi(pageNum, query ?? {}).then((value) => {
      const { success, morePage, articleList } = value;
      if (success) {
        // document.title = '苏先生的博客'
        setArticleStatus({
          page: articleStatus.page++,
          data:
            pageNum === 1
              ? articleList
              : articleStatus.data.concat(articleList),
          status: HttpStatus.success,
          morePage: morePage,
        });
      } else {
        setArticleStatus({
          page: pageNum,
          data: [],
          status: HttpStatus.error,
        });
      }
    });
  };

  // 获取文章列表
  useEffect(() => {
    setArticleStatus({
      page: 1,
      data: [],
      status: HttpStatus.loading,
    });
    getArticleList(1);
  }, [query]);

  // loading
  if (articleStatus.status === HttpStatus.loading) {
    return <LoadingWidget />;
  }

  // 请求失败
  if (articleStatus.status === HttpStatus.error) {
    return <ErrorWidget404 />;
  }

  // 手机端展示
  if (width <= IPAD_WIDTH) {
    return (
      <div className="phone_article_content">
        <ArticleDataList
          type={'phone'}
          pageStart={articleStatus.page}
          loadMore={getArticleList}
          hasMore={articleStatus.morePage ?? true}
          articleList={articleStatus.data}
        />
      </div>
    );
  }

  // PC端展示
  return (
    <div style={{ backgroundColor: '#a1db9b' }}>
      <ArticleDataList
        type={'pc'}
        pageStart={articleStatus.page}
        loadMore={getArticleList}
        hasMore={articleStatus.morePage ?? true}
        articleList={articleStatus.data}
      />
    </div>
  );
};
